<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<!--导入jquery-->
		<script src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<script>
			$(function() {
				$("#a1").click(function() {
					//alert(1)
					$('#tt').tabs('add', {

						title: '传智播客',

						content: '欢迎来到德莱联盟',

						closable: true
					});
				});
			});
			</script>
	</head>

	<body class="easyui-layout">

		<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

		<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>

		<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

		<div data-options="region:'west',title:'菜单导航',split:true" style="width:200px;">
			<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="fit:true">
				<!--每个面板都需要加title-->

				<div title="基础菜单" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
					<a href="javascript:void(0)" id="a1">创智</a>

				</div>

				<div title="系统菜单" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">

					content2

				</div>

			</div>

		</div>

		<div data-options="region:'center',title:'消息中心'" style="padding:5px;background:#eee;">
			<div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true">

				<div title="Tab1" style="padding:20px;">11 </div>

				<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">tab2 </div>

				<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">tab3 </div>

			</div>

		</div>
		<!--div[data-options=""]*5-->

	</body>

</html>